<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>夜show</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/mui.min.css">
    <style>
        html,
        * {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            background-color: #efeff4;
        }
        
        #list {
            margin-top: -1px;
        }
        
        .yty-li {
            /*background-image: url(../images/cbd.jpg);*/
            background: url(../images/60x60.gif) no-repeat;
            background-size: 100% 100%;
            /*position: absolute;*/
            filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
            /*background-repeat: no-repeat;*/
        }
        
        .yty-children {
            float: left;
            position: relative;
            top: 50%;
            left: 50%;
        }
        
        .wH {
            height: 200px;
            width: auto;
        }
        
        .yty-text {
            text-align: center;
            align-items: center;
            /* margin: 0px auto;*/
            color: rgba(255, 255, 255, 1);
            /*position:inherit;*/
            position: relative;
            height: auto;
            font-size: 15px;
            top: 35%;
            background-color: rgba(255, 0, 0, 0.0);
            align-content: center;
        }
        
        .yty-lable {
            font: "微软雅黑";
            font-size: 20px;
            color: rgb(255, 255, 255);
        }
        
        .mui-table-view-cell:after {
            height: 0px;
            left: 0px;
        }
        
        .mui-table-view-cell {
            padding: 0px;
        }
        
        .mui-content>#list>li {
            width: 100%;
            height: 150px;
        }
        
        .mui-content>#list>li>p {
            font-size: 20px;
            font-weight: bold;
            font-family: PingFang SC;
            margin-top: 50px;
            margin-bottom: 8px;
        }
        
        .mui-table-view-cell>a:not(.mui-btn) {
            margin: 0px;
        }
        
        span {
            display: block;
            padding: 10px;
        }
        
        .mui-icon-search:before {
            content: '\e466';
            color: #FFFFFF;
            margin-right: 8px;
        }
        
        #city {
            font-size: 15px;
            float: left;
            top: 50px;
            padding-right: 21px;
            background-image: url(../images/down.png);
            background-repeat: no-repeat;
            background-position: right;
            background-size: 14px 8px;
            ;
        }
        
        #city>a {
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <header id="yty-a" class="mui-bar  mui-bar-transparent">
        <!--测试-->
        <span title="城市" id="city" href="#">
			 	<a>未知</a>
	    </span>
        <a class=" mui-icon  mui-pull-right  mui-icon-search mui-active " href="../html/ye-shop-search.html"></a>
        <h1 id="title" class="mui-title"></h1>
    </header>

    <div class="mui-content">
        <ul id="list" class="mui-table-view ">

        </ul>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=bd9fc1d2c3e563b032bd5fdd58aa0a60"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/ms.getcity.js"></script>
    <script type="text/javascript" charset="utf-8">
        //mui初始化
        mui.init({
//          preloadPages: [{
//              id: 'ye-shop-list.html',
//              url: 'ye-shop-list.html'
//          }],

        });

        // 链接页面集
        var subpages = ['../html/mine.html', '../html/nearby.html', '../html/shopping-mall.html', '../html/shopping-mall.html'];
        var subpage_style = {
            top: '45px',
            bottom: '51px'
        };

        var aniShow = {};
        //图片集
        var mage = ['url(../images/palace.jpg)', 'url(../images/ktv.jpg)', 'url(../images/bar.jpg)', 'url(../images/pub.jpg)'];
        //列表
        var list = ['皇宫', 'KTV', '酒吧', '清吧'];
        var English = ['Palace', 'KTV', 'Bar', 'Pub'];

        var vlue = [];

        for (var i = 0; i < 4; i++) {

            // 创建li
            var createli = document.createElement("li");
            // createli.id = "yli" + i;
            createli.id = i;
            createli.className = "mui-table-view-cell wH"; //"mui-table-view-cell yty-li wH";

            var createA = document.createElement('a');
            createA.className = 'yty-li';
            createA.style.backgroundImage = mage[i];
            createA.style.height = '150px';
            createA.href = '../html/ye-shop-list.html';

            var createDiv = document.createElement('div');
            createDiv.className = "wH  yty-text";
            createA.appendChild(createDiv);
            createli.appendChild(createA);


            var createP = document.createElement('p');
            createP.className = "yty-lable";
            createP.innerHTML = list[i];
            createDiv.appendChild(createP);

            var createH5 = document.createElement('span');
            createH5.innerHTML = '———————&emsp;' + English[i] + '&emsp;———————';
            createDiv.appendChild(createH5);


            var ulyty = document.getElementById('list');
            ulyty.appendChild(createli);
        }

var   yeShopListPage = null;
        // 点击事件
        mui('#list').on('tap', 'li', function() {
            
            
            var ytycity =  document.getElementById('city').innerText;
            
            
            var ytyhref = 'ye-shop-list.html';
            var id = this.getAttribute("id");
           
            var nextUrl = ytyhref+'?supplier_type=' + id+'&city='+ytycity;
            var extras = {
                supplier_type: id,
                city:ytycity
            };


            // if (!id) {
            //     id = this.getAttribute("href");
            // }
            // var href = this.getAttribute('href');

            //非plus环境，直接走href跳转
            if (!mui.os.plus) {
            	
//方法一
              webview = mui.openWindowWithTitle({
           	     url: nextUrl,
           	     id : 'ye-shop-list.html',
           	     extras: extras,
           	     });
               return;
            }


            //var titleType = this.getAttribute("data-title-type");

            var webview_style = {
                    popGesture: "close"
            }

            // 


          if (ytyhref && ~ytyhref.indexOf('.html')) {
          	
                var webview = plus.webview.create(nextUrl, id, webview_style, extras);
                webview.addEventListener('titleUpdate', function() {
                    setTimeout(function() {
                        webview.show('pop-in', 300); //效果
                    }, 100);
                });
            }

        });


        /** a 标签拦截*/
        mui('#yty-a').on('tap', 'a', function() {


            var id = null;
            var href = id = this.getAttribute('href');
            console.log('----->', this.href);
            var extras = {};
            var webview_style = {
                popGesture: "close"
            }

            //非plus环境，直接走href跳转
            if (!mui.os.plus) {
                location.href = href;
                return;
            }



            var webview = plus.webview.create(this.href, id, webview_style, extras);
            webview.addEventListener('titleUpdate', function() {
                setTimeout(function() {
                    webview.show('pop-in', 300); //效果
                }, 100);
            });

        });
        // 获取定位并上传
        showCityInfo(1);
        msGetPosition();
    </script>
</body>

</html>